<template>
    <div class="brand-box">
        <!--        <h1>我的天</h1>-->
        <div class="search-box">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="选择查询条件" :label-width="formLabelWidth" prop="colorId" style="float: left">
                    <el-select v-model="search">
                        <el-option v-for="type in searList" :key="type.searchId" :label="type.searchList"
                                   :value="type.searchName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请输入" style="float: left">
                    <el-input placeholder="请输入" v-model="searchInput"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 50px;float: left">
                    <el-button type="primary" @click="searchGoodsbrand">查询</el-button>
                                        <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--操作按钮 @click="dialogVisible=true,formData={},imageUrl=''"-->
        <div class="crud-box">
            <el-button style="margin-right: 100px;float: right" type="success" icon="el-icon-edit" size="mini"
                       @click="showGoods=true">
                新增供应商
            </el-button>
        </div>
        <!--table展示数据-->
        <div class="table-box">
            <el-table
                    :data="brandList"
                    style="width: 100%"
                    @selection-change="checkBoxSelectionChange"
            >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="supplierName"
                        label="供应商名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="supplierContactman"
                        label="联系人"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="supplierPhone"
                        label="联系电话"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="supplierAddr"
                        label="联系地址">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="supplierAccount"
                        label="开号账户" width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="supplierBank"
                        label="开号银行" width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="address"
                        label="操作">

                    <template v-slot="obj">
                        <el-button type="success" icon="el-icon-edit" size="mini"
                                   @click="dialogVisiblePick=true,pickSupplier(obj.row)">
                            选用供应商品
                        </el-button>
                        <el-button type="success" icon="el-icon-edit" size="mini"
                                   @click="dialogVisibleEdit=true,initProduct(obj.row)">
                            修改
                        </el-button>
                        <el-popconfirm
                                confirm-button-text='确认'
                                cancel-button-text='取消'
                                @confirm="deleteSupplierById"
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定删除这一条数据吗？"
                        >
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                       @click="deleteForm.supplierId=obj.row.supplierId">删除
                            </el-button>
                        </el-popconfirm>
                    </template>


                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="page-box">
            <el-pagination
                    background
                    :current-page="searchData.currentPage"
                    :page-size="searchData.pageSize"
                    layout="prev, pager, next"
                    @current-change="currentPageChange"
                    :total="total">
            </el-pagination>
        </div>


        <!--弹框-->
        <div class="dialog-box">
            <el-dialog
                    title="添加"
                    :visible.sync="showGoods"
                    width="40%"
            >
                <el-form ref="form" :model="goods" label-width="240px">
                    <el-form-item label="供应商名称" style="margin-right: 200px">
                        <el-input placeholder="供应商名称" v-model="goods.supplierName" style="width: 205px"></el-input>
                    </el-form-item>

                    <el-form-item label="联系人" style="margin-right: 200px">
                        <el-input placeholder="联系人" v-model="goods.supplierContactman" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" style="margin-right: 200px">
                        <el-input placeholder="联系电话" v-model="goods.supplierPhone" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址" style="margin-right: 200px">
                        <el-input placeholder="联系地址" v-model="goods.supplierAddr" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" style="margin-right: 200px">
                        <el-input placeholder="开户银行" v-model="goods.supplierBank" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="开户账号" style="margin-right: 200px">
                        <el-input placeholder="开户账号" v-model="goods.supplierAccount" style="width: 205px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="showGoods = false" size="small">取 消</el-button>
    <el-button type="primary" @click="showGoods = false,addOrEdit()" size="small">确 定</el-button>
                </span>
            </el-dialog>

        </div>
        <div class="dialog-box">
            <el-dialog
                    title="修改"
                    :visible.sync="dialogVisibleEdit"
                    width="40%"
            >
                <el-form ref="form" :model="formDataEdit" label-width="240px">
                    <el-form-item label="供应商名称" style="margin-right: 200px">
                        <el-input placeholder="供应商名称" v-model="formDataEdit.supplierName" style="width: 205px"></el-input>
                    </el-form-item>

                    <el-form-item label="联系人" style="margin-right: 200px">
                        <el-input placeholder="联系人" v-model="formDataEdit.supplierContactman" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" style="margin-right: 200px">
                        <el-input placeholder="联系电话" v-model="formDataEdit.supplierPhone" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址" style="margin-right: 200px">
                        <el-input placeholder="联系地址" v-model="formDataEdit.supplierAddr" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" style="margin-right: 200px">
                        <el-input placeholder="开户银行" v-model="formDataEdit.supplierBank" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="开户账号" style="margin-right: 200px">
                        <el-input placeholder="开户账号" v-model="formDataEdit.supplierAccount" style="width: 205px"></el-input>
                    </el-form-item>
                </el-form>
                <br>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleEdit = false" size="small">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleEdit = false,productEdit()" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="dialog-box">
            <el-dialog
                    title="选用供应商品"
                    :visible.sync="dialogVisiblePick"
                    width="40%"
            >
                <h2>供应商名称：{{this.pickData.supplierName}}</h2>
                <template>
                    <el-dialog
                            width="70%"
                            title="内层 Dialog"
                            :visible.sync="innerVisible"
                            :append-to-body="true">

                        <div class="table-box">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    @selection-change="checkBoxSelectionChange"
                            >

                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="goodId"
                                        label="商品ID"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="goodName"
                                        label="商品名称"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="goodMarketprice"
                                        label="市场价">

                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="address"
                                        label="操作">

                                    <template v-slot="obj">
                                        <el-button type="success" icon="el-icon-edit" size="mini"
                                                   @click="innerVisible=false,pickProduct(obj.row)">
                                            选择
                                        </el-button>
                                    </template>


                                </el-table-column>
                            </el-table>
                        </div>
                        <!--分页-->
                        <div class="page-box">
                            <el-pagination
                                    background
                                    :current-page="searchParams.currentPage"
                                    :page-size="searchParams.pageSize"
                                    layout="prev, pager, next"
                                    @current-change="currentPageChange1"
                                    :total="total1">
                            </el-pagination>
                        </div>
                    </el-dialog>
                </template>
                <el-button type="success" icon="el-icon-edit" size="mini" style="margin-top: 2%;margin-bottom: 2%" @click="innerVisible=true,addFirstProduct()">选择商品</el-button>
                <div class="table-box">
                    <el-table
                            :data="kobeList"
                            style="width: 100%"
                            @selection-change="checkBoxSelectionChange"
                    >
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="goodId"
                                label="商品ID"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="goodName"
                                label="商品名称"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="goodMarketprice"
                                label="市场价"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="address"
                                label="操作">
                            <template v-slot="obj">
                                <el-popconfirm
                                        confirm-button-text='确认'
                                        cancel-button-text='取消'
                                        @confirm="deleteSupplierById2"
                                        icon="el-icon-info"
                                        icon-color="red"
                                        title="确定删除这一条数据吗？"
                                >
                                    <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                               @click="products.goodId=obj.row.goodId">删除
                                    </el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page-box">
                    <el-pagination
                            background
                            :current-page="searchParams2.currentPage"
                            :page-size="searchParams2.pageSize"
                            layout="prev, pager, next"
                            @current-change="currentPageChange2"
                            :total="total2">
                    </el-pagination>
                </div>
            </el-dialog>
        </div>
    </div>

</template>

<script>
    import supplier from './supplier'

    export default supplier;
</script>

<style src="./index.scss" lang="scss">
</style>